<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__aui.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__CSS__common.css">

    <style>
        /*content*/
        html body {
            /*padding-top: 0.5rem;*/
        }

        .activity {
            padding: 0 0.7rem;
            background: #fff;
        }

        .activityImg {
            width: 4.825rem;
            height: 4.825rem;
            border-radius: 0.3rem;
            margin-right: 0.8rem;
        }

        .showImg {
            width: 100%;
            height: 100%;
        }

        .activityContent {
            height: 4.825rem;
            position: relative;
        }

        .activityTitle {
            color: #333;
            font-size: 0.8rem;
            margin-bottom: 0.2rem;
            font-weight: 600;
        }

        .box {
            margin-bottom: 0.25rem;
            height: 0.65rem;
            line-height: 0.65rem;
            display: flex;
            align-items: center;
        }

        .destination,
        .activityTime {
            color: #999;
            font-size: 0.65rem;
        }

        .logo1 {
            width: 0.65rem;
            height: 0.65rem;
            background: url('__IMG__location.png') no-repeat center center;
            background-size: 100% 100%;
            margin-right: 0.2rem;
        }

        .logo2 {
            width: 0.65rem;
            height: 0.65rem;
            background: url('__IMG__clock.png') no-repeat center center;
            background-size: 100% 100%;
            margin-right: 0.2rem;
        }

        .report {
            padding-top: 0.5rem;
            width: 100%;
            position: absolute;
            bottom: 0;
        }

        .signUp {
            text-align: right;
            font-size: 0.65rem;
            color: #FFBA71;
            padding-top: 20px;
        }

        .signUp1 {
            text-align: right;
            font-size: 0.65rem;
            color: #24A8FC;
            padding-top: 1rem;
        }

        .signUp2 {
            text-align: right;
            font-size: 0.65rem;
            color: #999;
            padding-top: 1rem;
        }

        .xian {
            width: 0.75rem;
            height: 0.75rem;
            display: inline-block;
            vertical-align: middle;
        }

        .moreActivity {
            width: 100%;
            height: 2.7rem;
            line-height: 2.7rem;
            color: #999;
            font-size: 0.7rem;
            text-align: center;
        }

        .juli {
            margin-bottom: 0.5rem;
        }

        .activityDetails {
            padding: 0.75rem 0 0.75rem 0;
        }

        .jiangzuo {
            position: relative;
            color: #ccc;
            font-size: 0.5rem;
            padding: 0.15rem 0.25rem;
            padding-bottom: 0.05rem;
            max-width:5rem;
            height:1rem;
            /*display: inline-block;*/
            float: left;
            margin-top: 1.1rem;
        }

        .jiangzuo:after {
            width: 198%;
            height: 190%;
            position: absolute;
            top: -48%;
            left: -50%;
            content: "";
            border: 1px solid #E6E6E6;
            border-radius: 0.4rem;
            -ms-transform: scale(0.5);
            /* IE 9 */
            -moz-transform: scale(0.5);
            /* Firefox */
            -webkit-transform: scale(0.5);
            -o-transform: scale(0.5);
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

        }
        /*footer*/
        .foott {
            font-size: 0.75rem;
            color: #ccc;
            line-height: 0.75rem;
            margin: 1.15rem auto;
            text-align: center;
        }

        .banner {
            height: 13.875rem;
            background-color: #FFFFFF;
            margin-bottom: 0.5rem;
        }

        .tit {
            background-color: #FFFFFF;
            padding-left: 12.5px;
            padding-right: 12.5px;
        }

        .small_pic {
            width: 1.1rem;
            height: 1.1rem;
            margin-top: 1rem;
            margin-right: 3px;
        }

        .type {
            color: #333;
            font-size: 17px;
            font-weight: bold;
            margin-top: 1rem;
        }

        .dian {
            width: 1.1rem;
            height: 1.1rem;
            margin-top: 0.875rem;
        }

        .mar {
            margin-bottom: 0.5rem;
        }

        .tit1 {
            padding-bottom: 0.825rem;
        }

        .star {
            height: 10.35rem;
            background-color: #FFFFFF;
            padding-left: 1.15rem;
            padding-right: 1.15rem;
        }

        .name {
            font-size: 16px;
            color: #333333;
            padding-bottom: 0.25rem;
        }

        .intro {
            font-size: 10px;
            color: #333333;
            margin-bottom: 0.4rem;
        }

        .adv {
            width: 91%;
            height: 7.75rem;
        }

        .adv img {
            width: 100%;
            height: 100%;
        }

        .half {
            padding-left: 0.75rem;
        }

        .adv1 {
            width: 3.64rem;
            height: 5rem;
        }

        .adv1 img {
            width: 100%;
            height: 100%;
        }

        .half_name {
            font-size: 16px;
            color: #333333;
            padding-bottom: 0.2rem;
        }

        .half_name1 {
            font-size: 16px;
            color: #333333;
            padding-top: 0.7rem;
            padding-bottom: 0.2rem;
        }

        .adv2 {
            margin-top: 7px;
        }

        .tit2 {
            padding-bottom: 0.9rem;
        }

        .scroll_all {
            padding-bottom: 1.25rem;
            background-color: #fff;
        }

        .scroll {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #fff;
            height: 6.5rem;

        }

        .anli_content {
            width: 100%;
            background-color: #FFFFFF;
            padding-left: 0.825rem;
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        .anli_content_neirong {
            width: 10000%;
            /*padding-right: 0.825rem;*/
        }

        .content {
            float: left;
            width: 11.925rem;
            height: 6.5rem;
            background-color: #FAF9F9;
            margin-right: 0.925rem;
            padding: 1.275rem 1.125rem 1.05rem 1.125rem;
        }

        .answer {
            font-size: 15px;
            color: #000000;
            margin-bottom: 0.925rem;
        }

        .add_answer {
            height: 1.5rem;
            line-height: 1.5rem;
        }

        .avatar {
            width: 1.5rem;
            height: 1.5rem;
        }

        .avatar img {
            width: 100%;
            height: 100%;
        }

        .yonghu {
            font-size: 13px;
            color: #333;
            width: 80px;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .add {
            font-size: 13px;
            color: #76C3FD;
        }

        /*轮播图*/
        .top .swiper-container {
            width: 100%;
            height: 7.35rem;
        }

        .top .swiper-slide {
            width: 100%;
            padding: 0 0.75rem;
            border-radius: 10px;
            overflow: hidden;
        }

        .top .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            display: inline-block;
            border-radius: 100%;
            background: #FFFFFF;
            opacity: 0.5;
        }

        .top .swiper-pagination-bullet-active {
            background: #FFFFFF;
            opacity: 1;
        }

        .top .swiper-slide img {
            width: 100%;
            height: 100%;
        }

        /*轮播图*/
        .bottom .swiper-container1 {
            height: 6.525rem;
        }

        .bottom .swiper-slide1 {
            width: 100%;
            padding: 0 15.5px;
        }

        .four_11 {
            width: 2.75rem;
            height: 2.75rem;
            margin: 0 auto;
            margin-top: 15.5px;
        }

        .four_name {
            font-size: 12px;
            color: #999;
            padding-top: 0.375rem;
            text-align: center;
        }

        .bottom .swiper-pagination-bullet {
            width: 4px;
            height: 4px;
            display: inline-block;
            background-color: #292929;
            opacity: 0.2;
            border-radius: 100%;
        }

        .bottom .swiper-pagination-bullet-active {
            width: 15px;
            height: 3px;
            background: #A5A5A5;
            display: inline-block;
            opacity: 1;
            border-radius: 1.5px;
        }

        .swiper-slide img {
            border-radius: 0.25rem;
        }
    </style>
    <style>
        .aui-bar-nav .aui-iconfont {
            position: relative;
            font-family: "aui_iconfont" !important;
            font-size: 0.75rem;
            color: #E73C5C;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 2.4rem;
        }

        .aui-icon-tu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__search.png') no-repeat 0.675rem center;
            background-size: 22px 22px;
        }

        .aui-bar-nav .aui-title {
            font-size: 0.9rem;
            color: #333333;
            font-weight: 500;
            font-size: 18px;
        }

        .aui-icon-rightu {
            height: 2.4rem;
            width: 49px;
            background: url('__IMG__news.png') no-repeat right center;
            background-size: 22px 22px;
        }

        .aui-badge {
            display: inline-block;
            text-align: center;
            font-size: 0.55rem;
            min-width: 0.8rem;
            height: 0.8rem;
            line-height: 0.8rem;
            padding: 0.0rem;
            color: #fff;
            border: 1px solid #FF3C35;
            background-color: #FF3C35;
            border-radius: 50%;
            position: absolute;
            top: 0.2rem;
            right: 23px;
            z-index: 99;
            box-shadow: 1px 2px 8px rgba(253, 204, 207, 0.54);
        }

        .aui-bar-nav {
            background-color: #FFFFFF;
        }
    </style>
</head>
</head>
<body>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="left()">
        <span class="aui-iconfont aui-icon-tu"> </span>
    </a>
    <div class="aui-title">卓越护理</div>
    <a class="aui-pull-right" style="position: relative;padding-right:25px;">
        <span class="aui-iconfont aui-icon-rightu" tapmode="active" onclick="right()"></span>
        {if $data.num>0}
        <div class="aui-badge" id='hongPoint'><span id='hongNumber'></span>{$data.num}</div>
        {/if}
    </a>
</header>
<div class="banner">
    <!--轮播图-->
    <div class="top">
        <div class="swiper-container" id="top">
            <div class="swiper-wrapper" style='width:100%;'>
                {volist name='data.img' id="vo"}
                <div class="swiper-slide" onclick="openBanner(this)" banner_id="{$vo.banner_id}"
                     detail_type="{$vo.detail_type}"
                     banner_link="{$vo.banner_link}" activities_id="{$vo.activities_id}"
                     classroom_id="{$vo.classroom_id}" mechanism_id="{$vo.mechanism_id}"
                     infomation_id="{$vo.infomation_id}" class="swiper-slide" tapmode>
                    <img src="{$vo['banner_img']}"/>
                </div>
                {/volist}
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination1" style="width:100%;height:0.8rem;"></div>
        </div>
    </div>

    <!--轮播图-->
    <div class="bottom">
        <div class="swiper-container swiper-container1" id="bottom">
            <div class="swiper-wrapper" style='width:100%;'>
                <div class="swiper-slide swiper-slide1">
                    {volist name="activity_type[0]" id="vo"}
                    <div class="aui-col-xs-3" onclick="activity(this)" id="{$vo.id}" tapmode='active'>
                        <img src="__IMG__banner1.png" class="four_11"/>
                        <div class="four_name aui-ellipsis-2">{$vo.activity_name}</div>
                    </div>
                    {/volist}
                </div>
                {if count($activity_type)>1}
                <div class="swiper-slide swiper-slide1">
                    {volist name="activity_type[1]" id="vv3"}
                    <div class="aui-col-xs-3" onclick="activity(this)" id="{$vv3.id}" tapmode='active'>
                        <img src="{$vv3.activity_img}" class="four_11"/>
                        <div class="four_name aui-ellipsis-2">{$vv3.activity_name}</div>
                    </div>
                    {/volist}
                </div>
                {/if}
                {if count($activity_type)>2}
                <div class="swiper-slide swiper-slide1">
                    {volist name="activity_type[2]" id="vv1"}
                    <div class="aui-col-xs-3" onclick="activity(this)" id="{$vv1.id}" tapmode='active'>
                        <img src="{$vv1.activity_img}" class="four_11"/>
                        <div class="four_name aui-ellipsis-2">{$vv1.activity_name}</div>
                    </div>
                    {/volist}
                </div>
                {/if}
                {if count($activity_type)>3}
                <div class="swiper-slide swiper-slide1">
                    {volist name="activity_type[3]" id="vv2"}
                    <div class="aui-col-xs-3" onclick="activity(this)" id="{$vv2.id}" tapmode='active'>
                        <img src="{$vv2.activity_img}" class="four_11"/>
                        <div class="four_name aui-ellipsis-2">{$vv2.activity_name}</div>
                    </div>
                    {/volist}
                </div>
                {/if}
            </div>

            <div class="swiper-pagination swiper-pagination2" style="width:100%;height:1.2rem;"></div>
        </div>
    </div>

</div>
<!--热门活动-->
<div class="mar">
    <div class="tit flex-wrap" onclick="" tapmode='active'>
        <div class="small_pic"><img src="__IMG__huodong@3x.png"></div>
        <div class="type">热门活动</div>
        <div class="flex-con"></div>
        <div class="dian" onclick="activityHot()"><img src="__IMG__dian@3x.png"></div>
    </div>
    <div class="activity">
        {volist name='data.hot_activity' id="vv"}
        <div class="activityDetails flex-wrap underLine2" onclick="fnActive(this)" id="{$vv.id}" tapmode='acdtive'>
            <div class="activityImg"><img src="{$vv.activity_img}" class="showImg"></div>
            <div class="activityContent flex-con">
                <div class="activityTitle aui-ellipsis-1">{$vv.activity_name}</div>
                <div class="box">
                    <div class="logo1"></div>
                    <div class="destination aui-ellipsis-1">{$vv.activity_address}</div>
                </div>
                <div class="box">
                    <div class="logo2"></div>
                    <div class="activityTime">{$vv.activity_start_time}至{$vv.activity_end_time}</div>
                </div>
                <div class="report flex-wrap">
                    <div class="jiangzuo aui-ellipsis-1">{$vv.activity_names}</div>
                    <div class="signUp flex-con">
                        <img src="__IMG__xian.png" alt="" class="xian">报名中
                    </div>
                </div>
            </div>
        </div>
        {/volist}
    </div>

</div>
<!--热门活动-->
<!--志愿者之星-->
<div class="mar">
    <div class="tit tit1 flex-wrap" onclick="star()" tapmode='active'>
        <div class="small_pic"><img src="__IMG__zhiyuan@3x.png"></div>
        <div class="type">志愿者之星</div>
        <div class="flex-con"></div>
        <div class="dian"><img src="__IMG__dian@3x.png"></div>
    </div>
    <div class="star flex-wrap">
        {if count($data['list'])>0}
        <div class="flex-con rightLine" onclick="star_xq(this)" idd="{$data['list'][0]['user_id']}" tapmode='active'>
            <div class="name aui-ellipsis-1">{$data['list'][0]['user_username']}</div>
            <!--<div class="intro aui-ellipsis-2">{$data['list'][0]['mechanism_intro']}</div>-->
            <div class="adv"><img src="{$data['list'][0]['user_image']}"/></div>
        </div>
        {/if}
        <div class="flex-con">
            {if count($data['list'])>=2}
            <div class="half underLine" onclick="star_xq(this)" idd="{$data['list'][1]['user_id']}" tapmode='active'>
                <div class="flex-wrap">
                    <div class="flex-con">
                        <div class="half_name aui-ellipsis-1">{$data['list'][1]['user_username']}</div>
                        <!--<div class="intro aui-ellipsis-2">{$data['list'][1]['mechanism_intro']}</div>-->
                    </div>
                    <div class="adv1"><img src="{$data['list'][1]['user_image']}"/></div>
                </div>
            </div>
            {/if}
            {if count($data['list'])>=3}
            <div class="half" onclick="star_xq(this)" tapmode='active' idd="{$data['list'][2]['user_id']}">
                <div class="flex-wrap">
                    <div class="flex-con">
                        <div class="half_name1 aui-ellipsis-1">{$data['list'][2]['user_username']}</div>
                        <!--<div class="intro aui-ellipsis-2">{$data['list'][2]['mechanism_intro']}</div>-->
                    </div>
                    <div class="adv1 adv2"><img src="$data['list'][2]['user_image']}"/></div>
                </div>
            </div>
            {/if}

        </div>
    </div>
</div>
<!--志愿者之星-->
<!--热门问答-->
<div class="tit tit2 flex-wrap" onclick="answer()" tapmode='active'>
    <div class="small_pic"><img src="__IMG__hot_answer@3x.png"></div>
    <div class="type">热门问答</div>
    <div class="flex-con"></div>
    <div class="dian"><img src="__IMG__dian@3x.png"></div>
</div>
<div class="scroll_all" style="margin-bottom: 0.5rem;">
    <div class="scroll">
        <div class="anli_content">
            <div class="anli_content_neirong">
                {volist name="data.answer" id='vk'}
                <div class="content" onclick="answer_xq(this)" tapmode='active' idd="{$vk.interlocution_id}">
                    <div class="answer aui-ellipsis-2">{$vk.interlocution_title}</div>
                    <div class="add_answer flex-wrap">
                        <div class="avatar"><img src="{$vk.user_image}"></div>
                        <div class="yonghu aui-ellipsis-1">{$vk.user_username}</div>
                        <div class="add">添加了新回答</div>
                    </div>
                </div>
                {/volist}
                <div class="kong" style="width:0.3rem;height: 6.5rem;float:left;"></div>
            </div>
        </div>
    </div>
</div>
<div class="underNav">
    <div class="kuai" onclick="opennew(1);">
        <img src="__IMG__nav/nav1.png" alt="">
        <div class="Navfont1">首页</div>
    </div>
    <div class="kuai" onclick="opennew(2);">
        <img src="__IMG__nav/nav22.png" alt="">
        <div class="Navfont">机构</div>
    </div>
    <div class="kuai" onclick="opennew(3);">
        <img src="__IMG__nav/nav33.png" alt="">
        <div class="Navfont">公益课堂</div>
    </div>
    <div class="kuai" onclick="opennew(4);">
        <img src="__IMG__nav/nav44.png" alt="">
        <div class="Navfont">知识库</div>
    </div>
    <div class="kuai" onclick="opennew(5);">
        <img src="__IMG__nav/nav55.png" alt="">
        <div class="Navfont">我的</div>
    </div>
</div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>

<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__swiper.min.js"></script>
<script type="text/javascript" src="__JS__/layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__common.js"></script>

<script type="text/javascript">
    // 导航栏跳转
    function opennew(index) {
        if (index == 1) {
            location.href = '{:url("First/index")}';
        } else if (index == 2) {
            location.href = '{:url("Mechanism/index")}';
        } else if (index == 3) {
            location.href = '{:url("Classroom/index")}';
        } else if (index == 4) {
            location.href = '{:url("Information/index")}';
        } else if (index == 5) {
            location.href = '{:url("My/index")}';
        }

    }

    var swiper = new Swiper('#top', {
        slidesPerView: 'auto',
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination1',
    });
    var swiper = new Swiper('#bottom', {
        slidesPerView: 'auto',
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination2',
    });
    function left() {
        location.href = '{:url("First/search")}';
    }
    //轮播图详情
    function openBanner(el) {
        var detail_type = $api.attr(el, 'detail_type');
        //1活动 2课程 3H5链接 4机构 5资讯 6图文'
        if (detail_type == '1') {
            var activities_id = $api.attr(el, 'activities_id');
            location.href = '{:url("First/activitydatail")}?activity_id=' + activities_id;
        } else if (detail_type == '2') {
            var classroom_id = $api.attr(el, 'classroom_id');
            var user_id = {$user_id};
            location.href = 'http://share.verynurse.com/share/html/main3/classroomdetail.html?id11=' + classroom_id + "&user=" + user_id;
        } else if (detail_type == '3') {
            var banner_link = $api.attr(el, 'banner_link');

            location.href = banner_link;
        } else if (detail_type == '4') {
            var mechanism_id = $api.attr(el, 'mechanism_id');
            location.href = '{:url("Mechanism/mechanismDetail")}?mechanism_id=' + mechanism_id;
        } else if (detail_type == '5') {
            var infomation_id = $api.attr(el, 'infomation_id');
            location.href = '{:url("information/detail")}?id=' + infomation_id;
        } else if (detail_type == '6') {
            //轮播图详情
            var banner_id = $api.attr(el, 'banner_id');
            location.href = '{:url("information/first")}?banner_id=' + banner_id;
        }
    }
    //后台配置的活动
    function activity(el) {
        var idd = $api.attr(el, 'id');
        location.href = '{:url("First/activity")}?id=' + idd;
    }
    //热门活动跳转
    function activityHot() {
        location.href = '{:url("First/activity")}?id=1';
    }
    //活动详情
    function fnActive(el) {
        var idd = $api.attr(el, 'id');
        location.href = '{:url("First/activitydatail")}?activity_id=' + idd;
    }
    //志愿者之星
    function star() {
        location.href = '{:url("First/volunteer")}';
    }
    //志愿者之星详情
    function star_xq(el) {
        var idd = $api.attr(el, 'idd');
        location.href = '{:url("First/volunteerdetail")}?user_id=' + idd;
    }
    //热门问答
    function answer() {
        location.href = '{:url("First/answer")}';
    }
    //问答详情
    function answer_xq(el) {
        var idd = $api.attr(el, 'idd');
        location.href = '{:url("First/answerdetail")}?id=' + idd;
    }
    //消息列表
    function right() {
        location.href = '{:url("First/message")}';
    }
</script>
</html>
